<!-- 柱状图 -->
<style lang="stylus" scoped>
.category1
  height 100%
  background-size 100% 100%
  color white
  .main
    width 100%
    height calc(100% - 100px)
    margin-top -15px
</style>

<template>
<div class="category1">
  <p style='font-family:微软雅黑;font-size:16px;color:#0B903C;font-weight:bold;line-height:50px;'>刑满释放人员趋势</p>
  <div class="main"></div>
</div>

</template>
<script>
import echarts from 'echarts'
import header from 'components/header/header'
import filter from 'components/filter/filter'
import axios from 'axios'
export default {
  data() {
    return {
      legendArr: [],
      color: this.$store.state.color,
      styleArr: [],
      myChart: {},
      name: ''
    }
  },
  methods: {
    _init() {
      this.legendArr = this.myChart.getOption().series
      this.legendArr.forEach((data) => {
        data.selected = true;
      })
      this.$root.charts.push(this.myChart)
      window.addEventListener('resize', function() {
        this.myChart.resize()
      }.bind(this))
    }
  },
  components: {
    'v-header': header,
    'v-filter': filter
  },
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    this.myChart = echarts.init(document.querySelector('.category1 .main'))
    var areaname = localStorage.getItem('areaname');
    function sum(arr) {
      var count = 0;
      $(arr).each(function() {
        count += this - 0;
      })
      return count;
    }
    axios.get(this.GLOBAL.BASE_URL + '/a/sys/area/mapData?name=' + areaname).then((res) => {
    // axios.get('static/data/Datas.json').then((res) => {
      if (res) {
        var countarr = [];
        $(res.data).each(function() {
          if (this.name === areaname) {
            countarr = this.timecount.split('/');
          }
        })
        var sumarr = [];
        $(countarr).each(function() {
          var countarrs = this.split(",");
          sumarr[sumarr.length] = countarrs[0];
        })
        var myDate = new Date();
        var month = myDate.getMonth();
        var year = myDate.getFullYear();
        var montharr = [];
        montharr[0] = month - 1 + '月';
        montharr[1] = month + '月';
        montharr[2] = month + 1 + '月';
        if (month === 11) {
          montharr[0] = month - 1 + '月';
          montharr[1] = year + 1 + '年' + 1 + '月';
          montharr[2] = year + 1 + '年' + 2 + '月';
        }
        if (month === 0) {
          montharr[0] = year - 1 + '年' + 12 + '月';
          montharr[1] = 1 + '月';
          montharr[2] = 2 + '月';
        }
        this.myChart.setOption({
          title: {
            show: true
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            show: false
          },
          toolbox: {
            show: false
          },
          color: this.color,
          calculable: true,
          xAxis: [{
            name: '月份',
            type: 'category',
            boundaryGap: false,
            axisLine: {
              show: true,
              lineStyle: {
                color: '#00AA5E'
              }
            },
            axisTick: {
              show: false
            },
            nameTextStyle: {
              color: 'rgba(0, 155, 86, 1)',
              fontWeight: 'bold'
            },
            axisLabel: {
              textStyle: {
                color: 'rgba(11, 144, 60, 1)',
                fontWeight: 'bold'
              }
            },
            data: montharr
          }],
          yAxis: [{
            axisLine: {
              show: true,
              lineStyle: {
                color: '#00AA5E'
              }
            },
            nameLocation: 'end',
            nameGap: 20,
            nameRotate: 0,
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              textStyle: {
                color: 'rgba(11, 144, 60, 1)',
                fontWeight: 'bold',
                fontSize: 10
              }
            },
            name: '重点人群总数',
            type: 'value',
            nameTextStyle: {
              color: 'rgba(11, 144, 60, 1)',
              fontWeight: 'bold'
            }
          }],
          series: [{
            name: '刑满释放人员趋势',
            stack: 'stack2',
            type: 'line',
            data: sumarr,
            barWidth: 16,
            barGap: 0,
            color: ['#FFC300'],
            itemStyle: {
              normal: {
                label: {
                  formatter: function (params) {
                    if (params.value > 0) {
                      return params.value + "人";
                    } else {
                      return "";
                    }
                  },
                  show: true,
                  color: '#00AA5E'
                }
              }
            }
          }]
        });
        this._init()
      }
    });
  }
}

</script>